<template>
    <div class="pt35 pl30 fs16 pr43">
        <p class="fs20 c333 ffpf pb23" v-html="'客服电话：'+setting.ke_mobile"></p>
        <p class="lh40 fs16">
            <span class="mr30">
                <i class="iconfont fs16 w24 lh24 textc disinblock mr8 cfff bgaaa boradius50 icon-weixin"></i>
                “陕商所”微信：<i v-html="setting.wei_number || '' "></i>
            </span>
        </p>
        <p class="lh40">
             <span>
                <i class="iconfont fs16 w24 lh24 textc disinblock mr8 cfff bgaaa boradius50 icon-qq"></i>
                招商咨询：
                 <a :href="'http://wpa.qq.com/msgrd?v=3&uin='+setting.z_qq[0]+'&site=qq&menu=yes'"
                    target="_blank" class="pr8 c000"
                    v-html="setting.z_qq[0] || ''"
                 ></a>
                 <a :href="'http://wpa.qq.com/msgrd?v=3&uin='+setting.z_qq[1]+'&site=qq&menu=yes'"
                    target="_blank" class="pr8 c000"
                    v-html="setting.z_qq[1] || ''"
                 ></a>
            </span>

        </p>
        <p class="lh40">
             <span>
                <i class="iconfont fs16 w24 lh24 textc disinblock mr8 cfff bgaaa boradius50 icon-qq"></i>
                技术支持QQ：
                  <a :href="'http://wpa.qq.com/msgrd?v=3&uin='+setting.j_qq[0]+'&site=qq&menu=yes'"
                     target="_blank" class="pr8 c000"
                     v-html="setting.j_qq[0] || ''"
                  ></a>
                  <a :href="'http://wpa.qq.com/msgrd?v=3&uin='+setting.j_qq[1]+'&site=qq&menu=yes'"
                     target="_blank" class="pr8 c000"
                     v-html="setting.j_qq[1] || ''"
                  ></a>
            </span>
        </p>

        <p class="lh40">
            <span>
                <i class="iconfont fs16 w24 lh24 textc disinblock mr8 cfff bgaaa boradius50 icon-dizhi1"></i>
                <i v-html="'地址：'+setting.company_addr"></i>
            </span>
        </p>
        <!--地图-->
        <div class="w100p h380 mt40">
            <div id="container" class="h100p"></div>
        </div>
    </div>

</template>

<script>
    var map = null ,
        geocoder = null;
    export default {
        name: "Msg",
        props:['setting'],
        data(){
            return{
                dticon:require('./../../assets/img/dt.png'),
                addrs:''
            }
        },
        mounted(){
            var v = this;
            setTimeout(function () {
                map = new AMap.Map('container', {
                    resizeEnable: true, //是否监控地图容器尺寸变化
                    zoom:11, //初始化地图层级
                    center: [104.05914,30.51004]
                });
                geocoder = new AMap.Geocoder({
                    radius: 1000 //范围，默认：500
                });
                /*获取经纬度*/
                geocoder.getLocation(v.setting.company_addr, function (status, result) {
                    if (status === 'complete' && result.info === 'OK') {
                        // geocoder_CallBack(result);
                        if (result) {
                            v.addrs = result.geocodes[0].location;
                            //添加点标记，并使用自己的icon
                            map.setZoomAndCenter(11,[v.addrs.lng,v.addrs.lat]);
                            var marker = new AMap.Marker({
                                map: map,
                                position: [v.addrs.lng,v.addrs.lat],
                                icon: new AMap.Icon({
                                    size: new AMap.Size(20, 28),  //图标大小
                                    image: v.dticon,
                                    imageOffset: new AMap.Pixel(0, 0)
                                })
                            });
                            // 设置鼠标划过点标记显示的文字提示
                            marker.setTitle('v.setting.company_addr');

                            // 设置label标签
                            marker.setLabel({//label默认蓝框白底左上角显示，样式className为：amap-marker-label
                                offset: new AMap.Pixel(30, -30),//修改label相对于maker的位置
                                content: v.setting.company_addr
                            });
                        } else {
                            v.$message.warning('获取地址失败！')
                        }
                    } else {
                        v.$message.warning('获取地址失败！')
                    }
                });
            },500)
        },
    }
</script>

<style>
    div.amap-marker-label{
        box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.23);
        border: none;
        font-size: 14px;
        color: #333;
        line-height: 45px;
        padding-left: 12px;
        padding-right: 33px;
    }
    div.amap-icon img{
        width: 100%;
        height: 100%;
    }
    @media screen and (max-width: 1200px) {
        div.amap-marker-label {
            font-size: 20px;
            line-height: 60px;
        }
    }
</style>


















